NativeScript Vue — Flexbox and Grid

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

FlexboxLayout

We can use the FlexboxLayout to add a layout based on flexbox.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout backgroundColor="#3c495e">
      <Label text="first" width="90" backgroundColor="red" />
      <Label text="second" width="90" backgroundColor="green" />
      <Label text="third" width="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We add the backgroundColor prop to set the background color of the Label s.

text has the text. width sets the width.

So we get the Label s side by side.

We can also set the flexDirection prop to 'column' to create a column layout:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
      <Label text="first" height="90" backgroundColor="red" />
      <Label text="second" height="90" backgroundColor="green" />
      <Label text="third" height="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

The Label s will now be displayed in a column.

We can set the alignItems prop to align the items our way.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
      <Label text="first" width="90" height="90" backgroundColor="red" />
      <Label text="second" width="90" height="90" backgroundColor="green" />
      <Label text="third" width="90" height="90" backgroundColor="blue" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the alignItems prop to set the flex-start to align the items to the left.

The order of the components can be changed.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
      <Label
        text="first"
        order="2"
        width="90"
        height="90"
        backgroundColor="red"
      />
      <Label
        text="second"
        order="3"
        width="90"
        height="90"
        backgroundColor="green"
      />
      <Label
        text="third"
        order="1"
        width="90"
        height="90"
        backgroundColor="blue"
      />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the order prop to switch the order of the Label s in the flex container.

Components inside the FlexboxLayout will wrap automatically if they overflow the width of the screen.

For example, if we have:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
      <Label text="first" width="30%" backgroundColor="red" />
      <Label text="second" width="30%" backgroundColor="green" />
      <Label text="third" width="30%" backgroundColor="blue" />
      <Label text="fourth" width="30%" backgroundColor="yellow" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {};
</script>

Then the 4th Label will be pushed to the 2nd row.

This is because we set the flexWrap prop to 'wrap' .

GridLayout

The GridLayout component lets us arrange child elements in a table-like manner.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="115, 115" rows="115, 115">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We add the Label component with the row and col props to set the row and column.

columns have the width for the columns.

And rows have the heights for each row.

Conclusion

We can add flexbox layouts and grid layouts with NativeScript Vue.